<template>
  <div class="hot-search">
    <div class="hot-search__header">
      <span>工单异常</span>
    </div>
    <div class="clearfix">
      <div class="dss fr">
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format-value="yyyy-MM-dd HH:mm:ss"
          align="right"
          size="mini"
          @change="changeDate"
        />
      </div>
    </div>
    <div class="hot-search__container">
      <el-row class="hot-search__chart" :gutter="100">
        <el-col :md="12" :xs="24">
          <div class="block">
            <div class="count">
              <div class="number">
                <span>工单数</span>
                <span style="margin-top: 3px">{{ ordernum }}</span>
              </div>
              <!-- <div class="rise">
								<i class="el-icon-top-right"></i>
								<span>+7%</span>
							</div> -->
            </div>

            <!-- <e-charts :option="chartOptions" autoresize></e-charts> -->
          </div>
        </el-col>

        <el-col :md="12" :xs="24">
          <div class="block">
            <div class="count">
              <div class="number">
                <span>异常数</span>
                <span style="margin-top: 3px">{{ excepnum }}</span>
              </div>
              <!-- <div class="rise">
								<i class="el-icon-top-right"></i>
								<span>+7%</span>
							</div> -->
            </div>

            <!-- <e-charts :option="chartOptions" autoresize></e-charts> -->
          </div>
        </el-col>
      </el-row>

      <div class="hot-search__table" style="min-height: 336px;">
        <el-row>
          <el-table
            :props="{
              border: false,
              'max-height': '300px',
              'default-sort': {
                prop: 'ud',
                order: 'descending'
              }
            }"
            :data="tableList2"
            :columns="table.columns"
          >
            <template #slot-rank="{ scope }">
              {{ scope.$index + 1 }}
            </template>
          </el-table>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      chartOptions: {
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        },
        xAxis: {
          type: 'category',
          data: [
            '00:00',
            '2:00',
            '4:00',
            '6:00',
            '8:00',
            '10:00',
            '12:00',
            '14:00',
            '16:00',
            '18:00',
            '20:00',
            '22:00'
          ],
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '总访问量',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 6,
            data: [
              '1200',
              '1400',
              '1008',
              '1411',
              '1026',
              '1288',
              '1300',
              '800',
              '1100',
              '1000',
              '1118',
              '1322'
            ],
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#D1E5FF'
                  },
                  {
                    offset: 1,
                    color: '#FFFFFF'
                  }
                ],
                false
              )
            },
            itemStyle: {
              color: '#4165d7'
            },
            lineStyle: {
              width: 2
            }
          }
        ]
      },
      table: {
        columns: [
          {
            label: '排名',
            prop: 'a',
            align: 'center',
            width: 60,
            type: 'op',
            layout: ['slot-rank']
          },
          {
            label: '场站名',
            prop: 'name',
            align: 'center',
            'min-width': 180
          },
          {
            label: '工单数量',
            prop: 'num',
            align: 'center',
            'min-width': 100
          }
        ]
      },
      tableList2: [],
      topInfo: {},
      ordernum: 0,
      excepnum: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value2: [],
      app: {}
    }
  },
  mounted() {
    this.getInfo()
  },

  methods: {
    formatDate(val) {
      console.log('val', val.format('yyyy-MM-dd hh:mm:ss'))
      if (val !== '') {
        return val.format('yyyy-MM-dd hh:mm:ss')
      }
    },

    changeDate() {
      if (this.value2 && this.value2[0] && this.value2[1]) {
        this.getInfo(this.formatDate(this.value2[0]), this.formatDate(this.value2[1]))
      } else {
        this.getInfo()
      }
    },
    getInfo(startTime, endTime) {
      console.log('startTime, endTime', startTime, endTime)
      // this.$service.home.getException({
      //   startTime: startTime,
      //   endTime: endTime
      // }).then((res) => {
      //   const list = res.terminalOrderList
      //   let arr = []
      //   for (const key in list) {
      //     arr.push(list[key])
      //   }
      //   this.ordernum = res.ordernum
      //   arr = arr.sort(this.compare('num')).reverse()
      //   console.log('arr', arr)
      //   this.tableList2 = arr
      //   this.excepnum = res.excepnum
      //   this.app.refresh()
      // })
    },
    compare(property) {
      return function(a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    onLoad2({ ctx, app }) {
      this.app = app
      this.ctx = ctx
      this.ctx.done()
      // this.app.refresh();
      this.getInfo()
    }
  }
}
</script>

<style lang="scss">
.hot-search {
	&__header {
		display: flex;
		align-items: center;
		height: 50px;
		font-size: 15px;
		font-weight: bold;
		color: $color-main;
		padding: 0 20px;
	}

	&__chart {
		padding: 0 20px;

		.block {
			margin: 10px 0;

			.count {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10px;
				height: 40px;

				.fall,
				.rise {
					display: flex;
					align-items: center;
					margin-left: 10px;
					font-size: 15px;
				}

				.fall {
					color: #13ae7c;
				}

				.rise {
					color: #f21e37;
				}

				.number {
					display: flex;
					align-items: center;

					span {
						font-size: 13px;

						&:last-child {
							margin-left: 10px;
							font-size: 15px;
							font-weight: bold;
						}
					}
				}
			}

			.echarts {
				height: 50px;
				width: 100%;
			}
		}
	}

	&__table {
		padding: 10px;

		.el-table {
			&__header {
				th {
					background-color: #fff !important;
				}
			}
		}
	}
}

.dss{
    margin-right: 20px;
	margin-top: 5px;
}
</style>
